<%@ page import="org.jeecgframework.web.util.StaticValue" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html >
<html>
<head>
    <title>巡检异常报告</title>
    <t:base type="jquery,easyui,tools,echarts"></t:base>
    <style>
        .chart-container {
            width: 100%;
        }

        .search-bar {
            height: 40px;
            width: 80%;
            margin: 0 auto;
        }

        .search-bar .condition {
            width: 90%;
            float: left;
        }

        .search-bar div:last-child {
            width: 10%;
            float: right;
            text-align: right;
        }

        .search-bar span {
            padding-right: 10px;
        }

        .search-bar span select {
            height: 24px !important;
        }

        .search-bar .search-btn {
            float: right;
            width: 10%;
            text-align: center;
            line-height: 40px;
        }

        #chart {
            width: 80%;
            height: 600px;
            margin: -5px auto
        }
        #chain{
        	width:100px;
        }
        .pp-div{
			margin-left:5px;width: 100%;
        }
        .pp-div p{
        	color:#7d7b7b;
        	font-size: 17px;
        	word-spacing:1px;
        	letter-spacing:1px;
        }
		.pp-div span{
        	color:#7d7b7b;
        	font-size: 14px;
        	word-spacing:1px;
        	letter-spacing:1px;
        }
    </style>
</head>
<body>
<div class="chart-container">
    <div class="search-bar">
        <div class="condition">
            <span>
                <label>年度选择:</label>
	                <select name="year" id="year">
	                    <c:forEach begin="2016" end="2019" var="y">
	                    	<option value="${y}" <c:if test="${y eq 2019 }" >selected='selected'</c:if>>${y}</option>
	                    </c:forEach>
                    </select>
			</span>
			<c:if test="${userRoleIndex ne 1 }">
	           	<span>
	                <label>院线:</label>
                    <input id="intheaterId_1" name="intheaterId_1" type="hidden">
                    <input id="intheatername_1" class="inputxt" readonly="readonly" style="width: 120px;"/>
                    <t:choose hiddenName="intheaterId_1" hiddenid="id" inputTextname="intheatername_1"
                              url="zyIntheaterController.do?zyintheatersCheckboxList"
                              name="intheaterList" icon="icon-search" title="院线列表" textname="typename"
                              isclear="true" height="300px" width="400px"/>
				</span>
	           	<span>
	                <label>机型:</label>
	                   <input id="typeId" name="type.id" type="hidden"/>
	                   <input id="typeName" type="text" readonly="readonly" style="width: 150px" class="inputxt"/>
	                   <t:choose hiddenName="typeId" hiddenid="id" inputTextname="typeName" textname="text"
	                             title="机型" url="zyEquipmentTypeController.do?goChooseEquipmentTypeForEquipment"
	                             name="zyEquipmentTypeList" width="600px" height="400px"
	                             icon="icon-search" isclear="true"/>
				</span>
				<span>
					<label>异常类型</label>
					<select id="irExType" style="width: 100px;">
						<option value="">---请选择---</option>
						<option value="6">亮度</option>
						<option value="1">温度</option>
						<option value="2">湿度</option>
						<option value="3">三相电压</option>
						<option value="4">单相电压</option>
						<option value="5">零地电压</option>
					</select>
				</span>
			</c:if>
	    </div>
	    <div>
			<span>
			    <a href="javascript:searchData()" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="search">查询</a>
			</span>
		</div>
    </div>
	<div class="pp-div" style="width:1000px;">
    	<p>巡检异常报告<br>
    		<span>饼图反映了巡检中存在环境异常的放映机与正常数量的对比；柱形图为异常项的统计。</span><br>
    	</p>
    </div>
    <div id="pieChart" style="height: 500px;width:1000px;"></div>
</div>
<script type="text/javascript">
var pieChart;
$(function(){
    // $("select[name='chain']").children(":first").text("全部院线");
    searchData();
	pieChart = echarts.init(document.getElementById('pieChart'));//饼 柱
});

function searchData() {
	var prams = {};
	prams.chain = $("#intheatername_1").val();
	prams.typeId = $("#typeId").val();
	prams.irExType = $("#irExType").val();
	prams.year = $("#year").val();
	$.getJSON("zyIpReportXXController.do?queryIpReportBPieChartData", prams, function (data) {
		if (!$.isEmptyObject(data)) {
			option.options[0].series[0].data = data.exCountList;
			option.options[0].series[1].data = [
					{
						name : '异常数量',
						value : data.exCount 
					},{
						name : '正常数量',
						value : data.total 
					}
				];
			var arr = [];
        	if($('#irExType').val() == ''){
        		$('#irExType option').each(function(i,item){
        			if($(item).val() != ''){
            			arr.push($(item).text());
        			}
        		});
        	}else{
        		arr.push($('#irExType option:selected').text());
        	}
        	option.baseOption.xAxis[0].data = arr;
		}
		pieChart.setOption(option);
	});
}

option = {
    baseOption: {
	    title: {
	        text: '巡检异常报告'
	    },
        timeline: {
            show:false
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b}: {c}"
        },
        calculable : true,
        grid: {
            top: 60,
            bottom: 20
        },
        xAxis: [
            {	
            	'axisLabel':{'interval':0},
                data: [],
                splitLine: {show: false}
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量'
            }
        ],
        series: [
            {name: '', type: 'bar'},
            {
                name: '异常占比',
                type: 'pie',
                center: ['75%', '35%'],
                radius: '28%'
            }
        ]
    },
    options: [
        {
            series: [
                     {barWidth: '30%',data: []},
                     {data: []}
                 ]
        }
    ]
};
</script>
</body>
</html>
